<template>
    <div class="set-store">
        <el-row :gutter="20" class="rows">
            <el-col :span="12" :offset="6">
                <el-form class="form" ref="form" :model="form" label-width="120px" label-position='left'>
                    <div class="module-title">商户信息</div>
                    <el-form-item label="商户全称" size="small" class="el-form-item">
                        <el-input v-model="info.store_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商户简称" size="small" class="el-form-item">
                        <el-input v-model="info.short_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商户ID" size="small" class="el-form-item">
                        <el-input v-model="info.store_code" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商户类型" size="small" class="el-form-item">
                        <el-select v-model="info.store_type" placeholder="请选择 商户类型">
                          <el-option v-for="item in storetypelist" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商户地址" size="small" class="el-form-item">
                        <el-cascader :options="options" @change="cityChange" :props='props' expand-trigger="hover" :value='[info.province, info.city, info.district]'></el-cascader>
                        <!-- <el-select v-model="form.storeType" style="width: 30%" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-select v-model="form.storeType" style="width: 30%" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-select v-model="form.storeType" style="width: 30%" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select> -->
                        <el-input v-model="info.address" style="margin-top: 10px"></el-input>
                    </el-form-item>
                    <el-form-item label="客户电话" size="small" class="el-form-item">
                        <el-input v-model="info.store_service_tel"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人" size="small" class="el-form-item">
                        <el-input v-model="info.contact_name"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人电话" size="small" class="el-form-item">
                        <el-input v-model="info.contact_phone"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱" size="small" class="el-form-item">
                        <el-input v-model="info.contact_email"></el-input>
                    </el-form-item>
                    <el-form-item label="推广人" size="small" class="el-form-item">
                        <el-input v-model="info.promotion_code" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" size="small" class="el-form-item">
                        <el-input v-model="info.created_at" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="更新时间" size="small" class="el-form-item">
                        <el-input v-model="info.updated_at" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item size="small" class="el-form-item text-right">
                        <el-button>取消</el-button>
                        <el-button type="primary" @click="onSubmit" v-loading.fullscreen.lock="fullscreenLoading">确认</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <!-- 资料信息 
            <el-col :span="12">
                <el-form class="form" ref="form" :model="form" label-width="80px" label-position='left' style="padding-bottom: 120px">
                    
                    <div class="module-title">帐号信息<a href="javascript:;"><i class="el-icon-setting"></i>修改</a></div>
                    <el-form-item label="总管理员" size="small" class="el-form-item">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="登录帐号" size="small" class="el-form-item">
                        <el-input v-model="form.account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" size="small" class="el-form-item">
                        <el-input v-model="form.passsword"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" size="small" class="el-form-item">
                        <el-input v-model="form.surePassword"></el-input>
                    </el-form-item>
                    
                </el-form>
            </el-col>-->
        </el-row>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import CityList from './../../api/city';
export default {
  mounted () {
    let that = this;
    console.log(CityList);
    http.get(api.storeInfo, {
      token: localStorage.getItem('token'),
      store_code: that.$route.query.store_code ? that.$route.query.store_code : ''
    }, response => {
      that.info = response.data[0];
      console.log(that.info);
    }, fail => {
      console.log(fail);
    });
    // 获取商户类型列表
    http.get(api.getStoreTypeList, {
      token: localStorage.getItem('token')
    }, response => {
      that.storetypelist = response.data[0].result;
    }, fail => {
      console.log(fail);
    });
  },
  methods: {
    handleAvatarSuccess: function (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    fileChange (event, img) {
      var file = event.target.files;
      http.upImg(api.upimg, {
        file: file[0]
      }, response => {
        this[img] = response.data[0].file_code;
        console.log(this);
      }, err => {
        console.log(err);
      });
    },
    surecommit: function () {
      var that = this;
      that.fullscreenLoading = !that.fullscreenLoading;
      http.post(api.merchantCreateDetails, {
        store_code: that.info.store_code,
        store_name: that.info.store_name,
        store_type: that.info.store_type,
        province: that.info.province,
        city: that.info.city,
        district: that.info.district,
        address: that.info.address,
        // 联系人姓名，电话，邮箱
        contact_name: that.info.contact_name,
        contact_phone: that.info.contact_phone,
        contact_email: that.info.contact_email,
        // 前台电话
        store_service_tel: that.info.store_service_tel,
        // 酒店描述
        // store_type_desc: that.info.store_type_desc,
        // 简称
        short_name: that.info.short_name,
        token: localStorage.getItem('token')
      }, res => {
        that.fullscreenLoading = !that.fullscreenLoading;
        if (res.code === '10001') {
          that.$message({
            message: '修改成功',
            type: 'success'
          });
          return false;
        };
        that.$message({
          message: res.msg,
          type: 'success'
        });
      }, error => {
        that.fullscreenLoading = !that.fullscreenLoading;
        that.$message({
          message: '网络错误，请稍候再试',
          type: 'error'
        });
        console.log(error);
      });
    },
    // 表单提交
    onSubmit () {
      let that = this;
      if (that.info.store_name === '') {
        alert('请填写商户名称');
        return false;
      } else if (that.info.address === '') {
        alert('请填写详细地址');
        return false;
      } else if (that.info.contact_name === '') {
        alert('请填写负责人');
        return false;
      } else if (that.info.contact_phone === '') {
        alert('请填写联系电话');
        return false;
      } else if (that.info.contact_email === '') {
        alert('请填写联系邮箱');
        return false;
      };
      that.surecommit();
    },
    // 城市三级联动改变的时候触发
    cityChange (value) {
      /**
       * value格式
       * type: Array
       * @return ['浙江', '杭州', '滨江区']
       */
      this.info.province = value[0];
      this.info.city = value[1];
      this.info.district = value[2];
      console.log(value);
    }
  },
  data () {
    return {
      info: {},
      store_code: this.$route.query.store_code ? this.$route.query.store_code : '',
      storetypelist: {},
      props: {
        value: 'value',
        label: 'value',
        children: 'children'
      },
      fullscreenLoading: false,
      form: {
        name: '',
        account: '',
        passsword: '',
        surePassword: '',
        storeName: '',
        storeType: '',
        charge: '',
        phone: '',
        email: '',
        promotion_code: '',
        created_at: '',
        updated_at: '',
        promoters: '',
        // 省份
        province: '',
        // 城市
        city: '',
        // 区县
        county: ''
      },
      options: CityList.CityList,
      settlement: {
        name: '',
        bank: '',
        city: '',
        branch: '',
        bankType: '',
        account: ''
      },
      baseUrl: api.baseUrl + api.upimg,
      imageUrl: '',
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      img8: '',
      showImg: api.baseUrl + api.showImg
    };
  }
};
</script>

<style lang="stylus" scoped>
.set-store
  .rows
    margin-top: 10px
    .form
      padding: 20px
      box-sizing: border-box
      background: #fff
      .module-title
        border-left: 5px solid #36ADCB
        padding-left: 5px
        box-sizing: border-box
        font-size: 16px
        color: #999
        a
          color: #333
          font-size: 14px
          float: right
      .el-form-item
        margin-top: 15px
      .images
        position: relative
        border: 1px solid #ABABAB
        height: 160px
        width: 120px
        margin: 0 auto 15px
        text-align: center
        .addimg
          margin: 50px auto 15px
          display: inline-block
          width: 30px
          height: 30px
        .imgshow
          position: absolute
          top: 0
          left: 0
          width: 122px
          height: 162px
      .avatar-uploader
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        cursor: pointer
        overflow: hidden
        opacity:0
      .tips
        margin-top: 15px
        margin-bottom: 100px
        color: #666
        font-size: 12px
  .change-btn
    margin-top: 45px
</style>
